import React, { Component, useState, useEffect } from "react";
import { toast } from "@/utils/utils";
import Taro from "@tarojs/taro";
import { getCurrentInstance, useReachBottom } from "@tarojs/taro";
import InterTime from "@/components/InterTime";
import { View } from "@tarojs/components";
import { fetchOrderDetail, fakeWechatPayInfo } from "@/server/order";
import { backgroundObj, loginData } from "@/utils/utils";
import Router from "@/utils/router";
import "./index.scss";

const OrderWeex = (props) => {
  const { params } = getCurrentInstance().router;
  const { orderSn } = params;
  const { organizationId = "1" } = loginData() || {};
  useEffect(() => {
    fetchData();
  }, []);
  const [orderResult, setOrderResult] = useState({});
  const { createTime, merchantImg, merchantName, payFee } = orderResult;
  const fetchData = () => {
    fetchOrderDetail({
      orderSn,
      organizationId,
    }).then((e) => {
      const { orderInfo } = e;
      setOrderResult(orderInfo);
    });
  };
  const fakeUpdate = () => {
    fakeWechatPayInfo({
      orderSn,
      xcxType: 'main'
    }).then((e) => {
      Taro.requestPayment({
        ...e,
        success: (res) => {
          Router("orderDetail", { args: { orderSn } });
        },
        fail: (res) => {
          toast("支付失败" + JSON.stringify(res));
        },
      });
    });
  };
  return (
    <View className="payWeex_box">
      <View className="payWeex_topMerchant">
        <View className="payWeex_merchantProfile"></View>
        <View className="payWeex_merchantName font_hide">{merchantName}</View>
      </View>
      <View className="payWeex_payContent">
        <View className="payWeex_title">
          支付剩余时间
          {createTime && (
            <InterTime
              times={createTime}
              fn={() => {
                history.goBack();
              }}
            ></InterTime>
          )}
        </View>
        <View className="payWeex_price">
          <View className="payWeex_icon">¥</View>
          <View className="payWeex_total">{payFee}</View>
        </View>
      </View>
      <View className="payWeex_submit_box public_center">
        <View
          className="payWeex_submit public_center"
          onClick={() => fakeUpdate()}
        >
          微信支付 ¥{payFee}
        </View>
      </View>
    </View>
  );
};

export default OrderWeex;
